<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    function show() {
      var str = "前端开发";
      str += ",大数据开发";
      console.log(str);
    }
    show(); //前端开发,大数据开发
    show(); //前端开发,大数据开发
    // 结论：函数的生命周期从调用时开始创建，到函数执行完结束生命周期。

    // 用闭包实现上面操作
    function show() {
      var str = "前端开发";
      var fn = function () {
        str += ",大数据开发";
        console.log(str);
      };
      return fn;
    }
    var newFn = show();
    newFn();
    newFn();
    newFn();

    /* for (var i = 1; i <= 10; i++) {
      setTimeout(function () {
        //回调函数异步执行
        console.log(i); //11
      }, 1000);
    } */
    /* 以上代码，for先于回调函数执行完，因为回调函数属于异步操作，后于for执行，
    for执行完后i的值为11这时再在回调函数中输出i的值，将输出的全是11 */

    // 用闭包实现将for中所有i的值取出
    for (var i = 1; i <= 10; i++) {
      // 每执行一次for循环，执行一次闭包 IIFE
      (function (i) {
        setTimeout(function () {
          console.log(i);
        }, 0);
      })(i);
    }
    /* 以上返回的结果为1，2，3....10，每次for循环将i的值传给闭包函数，
    当for执行完后，执行回调函数时，这时的i的每一个值仍驻留在内存中 */

    // 写法一
    (function () {
      var i = 10;
      window.result = function () {
        ++i;
        return i;
      };
    })();
    console.log(result()); //11
    console.log(result()); //12
    console.log(result() + 1); //14

    // 写法二
    var rs = (function () {
      var i = 10;
      return function () {
        ++i;
        return i;
      };
    })();
    //返回的是一个函数  rs接收的为函数
    console.log(rs()); //11
    console.log(rs()); //12

    // 非IIFE实现闭包
    function fn() {
      var i = 10;
      return function () {
        ++i;
        return i;
      };
    }
    // 通过闭包可以实现在函数外拿到函数内部的数据
    var rs = fn();
    console.log(rs());//11
    console.log(rs());//12
    console.log(rs());//13
  </script>
</html>
